<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用className和display等属性实现横向下拉菜单</title>

<link href="css/unite_header_0811.css" type="text/css" rel="stylesheet" />
<link href="css/ddhome.css" type="text/css" rel="stylesheet" />
<style>
.ddnewhead_mainnav .goods {
	background: url(images/unite_header.gif) no-repeat -300px 0px


}
.ddnewhead_mainnav a.goods:hover {
	z-index: 500;
	background: #fff url(images/unite_header.gif) no-repeat -400px 0px;
	cursor: default;
	position: relative
}
.ddnewhead_mainnav a.hover {
	z-index: 500;
	background: url(images/unite_header.gif) #fff no-repeat -400px 0px;
	cursor: default;
	position: relative;
}
.ddnewhead_mainnav .goods span {
	padding-left: 5px
}
.ddnewhead_addnav .ddnewhead_bang a.menu_btn {
	background: url(images/unite_header.gif) no-repeat -88px -237px;
	width: 59px;
	text-align: center;
	border: 1px solid #ccc;
	font-weight: bold;
	padding: 3px 9px;
}
.ddnewhead_addnav .ddnewhead_bang a.menu_btn:hover {
	background: url(images/unite_header.gif) no-repeat -238px -237px;
	color: #f60;
	text-decoration: none;
	border: 1px solid #ee7304;
}
.ddnewhead_addnav .ddnewhead_bang a.hover {
	border-right: #ee7304 1px solid;
	border-top: #ee7304 1px solid;
	background: url(images/unite_header.gif) no-repeat -238px -237px;
	border-left: #ee7304 1px solid;
	color: #f60;
	border-bottom: #ee7304 1px;
	text-decoration: none;
}
</style>


<script language="javascript">
  var sug_gid=function(node){
	  return document.getElementById(node);
  } 
  
  function baimouseOver(){
	  sug_gid('a_baihchannel').className = "goods hover";
	  sug_gid('_ddnav_guan').style.display = "block";
  }
  function baimouseOut(){
	 sug_gid('a_baihchannel').className = "goods";
	 sug_gid('_ddnav_guan').style.display = "none";
  }
  
  //--------------------header---------
  //操作条菜单
  function showgaoji(aid,did){
	  var obj = document.getElementById(aid);
	  var divotherChannel=document.getElementById(did);
	  obj.className="menu_btn hover";
	  divotherChannel.style.zIndex = 1000 ;
	  divotherChannel.style.display = "block";
  }
  
  function hideotherchannel(aid,did){
	var divotherChannel=document.getElementById(did);
	var mydd=document.getElementById(aid);
	if(divotherChannel.style.display!="none"){
		divotherChannel.style.display="none";
		mydd.className="menu_btn";
	}
  }
</script>

</head><body>

<div class="ddnewhead_topnav" id="_ddnav_class1">
  <ul class="ddnewhead_mainnav">
    <li><a class="nonce" href=""><span>首页</span></a> </li>
    <li><a class="book " href="/"><span>图书</span></a></li>
    <li class="ddnewhead_goods"><a class="goods" id="a_baihchannel" 
        onmouseover="baimouseOver();" onmouseout="baimouseOut();" 
        href="javascript:void(0);"><span>百货</span></a> 
      <div class="ddnewhead_goods_panel" id="_ddnav_guan" style="display: none" 
           onmouseover="baimouseOver();" onmouseout="baimouseOut();">
        <ul>
          <li><a href=""><span class="goods_link"></span>家居家纺</a>
          <a href=""><span class="goods_link"></span>家具装饰</a>
          <a href=""><span class="goods_link"></span>手表饰品</a>
          <a href=""><span class="goods_link"></span>鞋包皮具</a></li>
          <li><a href=""><span class="goods_link"></span>手机数码</a>
          <a href=""><span class="goods_link"></span>电脑办公</a>
          <a href=""><span class="goods_link"></span>玩具文具</a> 
          <a href=""><span class="goods_link"></span>家用电器</a></li>
          <li><a href=""><span class="goods_link"></span>家居家纺</a> 
          <a href=""><span class="goods_link"></span>潮流服装</a>
          <a href=""><span class="goods_link"></span>美妆个护</a> 
          <a href=""><span class="goods_link"></span>运动户外</a></li>
          <li class="ddnewhead_goods_panel_list_last">
          <a href=""><span class="goods_link"></span>食品保健</a> 
          <a href=""><span class="goods_link"></span>汽车用品</a></li>
        </ul>
      </div>
    </li>
    <li><a class="" href=""><span>品牌</span></a></li>
    <li><a class="" href=""><span>促销</span></a> </li>
  </ul>
  <ul class="ddnewhead_addnav">
    <li class="ddnewhead_bang"><a class="menu_btn" id="a_topchannel" 
         onmouseover="showgaoji('a_topchannel','_ddnav_bang');"
         onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');" 
         href="http://bang.dangdang.com/" target="_blank">当当榜</a> 
      <div class="ddnewhead_ddbang_panel" id="_ddnav_bang" 
         onmouseover="showgaoji('a_topchannel','_ddnav_bang')" 
         onmouseout="hideotherchannel('a_topchannel','_ddnav_bang');">
          <ul class="ddnewhead_ddbang_list" style="width: 67px">
            <li><a href="" target="_blank">图书畅销榜</a></li>
            <li><a href="" target="_blank">五星图书榜</a></li>
            <li><a href="" target="_blank">图书飙升榜</a></li>
            <li><a href="" target="_blank">新书热卖榜</a></li>
            <li><a href="" target="_blank">音乐畅销榜</a></li>
            <li><a href="" target="_blank">影视畅销榜</a></li>
          </ul>
      </div>
    </li>
  </ul>
</div>

</body>
</html>
